{% extends '../../../layouts/skins/v2/layout_detail.volt' %}
{% block videoPlayerSection %}
    <div id="video-player-section" class="watch-page">
        <div class="video-player-container">
            <div ng-controller="detailController" class="video-player-root">
                <div id="player-container" class="container with-background" style="width: 954px; height: 542px; padding: 9px; left: auto; visibility: visible; background-size: 962px 549px; background-position: 0px 0px;">
                    <div id="flash-player-container" class="player">
                        <div id="myElement">Loading the player...</div>
                        <script type="text/javascript" src="{{url('vendor/jwplayer/jwplayer.js')}}"></script>
                        <script type="text/javascript">jwplayer.key="Tl/cGRKD5+mHxuBA9abJoeWYGnxLoRlF9Xt8VQHJS2nHMmlibF4GZ6FPp4Zk0206";</script>

                        <script>
                            jwplayer("myElement").setup({
                                "autoStart": false ,
                                width: "100%",
                                height: "520",
                                abouttext: "Konnect+",
                                //flashplayer: "public/vendor/jwplayer/jwplayer.flash.swf",
                                logo: {
                                    file: "http://javhd.com/images/logo.png",
                                    link: '',
                                    hide : true
                                },

                                skin: "{{url('vendor/jwplayer/skins/five.xml')}}",
                                //image: "{{url('public/layouts/skins/frontend/defaults/images/img1.jpg')}}",
                                playlist: [{
                                    sources: [{
                                        file: "http://vjs.zencdn.net/v/oceans.mp4",
                                        label: "720p SD"
                                    },{
                                        file: "http://vjs.zencdn.net/v/oceans.mp4",
                                        label: "560p SD"
                                    }],
                                    title: "Student Of The Year",
                                    tracks: [{
                                        file: "{{url('vendor/jwplayer/big.srt')}}",
                                        label: "English"

                                    },{
                                        file: "{{url('vendor/jwplayer/small.srt')}}",

                                        label: "French"
                                    }]
                                }],

                                plugins: {
                                    '{{url('vendor/jwplayer/plugins/overlay/overlay.js')}}': {
                                        text: 'Text that you want to go within the overlayed banner'
                                    }
                                }
                            });
                        </script>
                    </div>
                </div>

                <div id="video-description" class="container player-width" style="width: 944px;">
                    <div class="row">
                        <div class="pull-left">
                            <div class="poster-actions margin-bottom-30">
                                <img id="videoPoster" src="http://images001.erosnow.com/music/2/1007692/img14582/6171253/1007692_6171253.jpg" alt="Selfie Pulla | Kaththi">
                                <a href="#" class="btn btn-primary" href="/#!/movie/watch/1007691/kaththi">Watch Trailer</a>
                            </div>
                        </div>
                        <div class="pull-left margin-left-20">
                            <div class="watch-desc">
                                <div class="">
                                    <h1 class="largexl font-mont" id="watch-title">
                                        <span itemprop="name" class="bold title">Selfie Pulla</span> –
                                        <span class="sub-title">Kaththi</span>
                                    </h1>
                                    <div class="margin-top-5">
                                        <span id="videoType">Music Video</span>
                                        <span class="sep-pipe">|</span>
                                        <span id="relYear">2014</span>
                                        <span class="sep-pipe">|</span>
                                        <span id="videoDuration">1min 49secs</span>
                                    <span id="viewCount" class="">
                                        <span class="sep-pipe">|</span>
                                        <span class="view-count"></span>
                                        <span>68,299 views</span>
                                    </span>
                                    </div>
                                    <div class="movie-share margin-top-20">
                                        <a href="#" class="">
                                            <i class="fa fa-info-circle fa-1"></i>
                                            Chi tiết
                                        </a>
                                        <a class="">
                                            <i class="fa fa-comments fa-1"></i>
                                            Bình luận
                                        </a>
                                        <a class="share-btn twitter">
                                            <i class="fa fa-twitter-square fa-1"></i>
                                            Twitter
                                        </a>
                                        <a class="share-btn facebook">
                                            <i class="fa fa-facebook-square fa-1"></i>
                                            Facebook
                                        </a>

                                        <a class="share-btn g+">
                                            <i class="fa fa-google-plus-square fa-1"></i>
                                            Google+
                                        </a>
                                    </div>
                                    <div class="">
                                        <div class="synopsis">

                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="clear"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block content %}
    <div ng-controller="movieController">
        {% for i in 1..5 %}
            <div>
                <div class="page-header">
                    <h3>
                        <a href="">
                            Video Mới Nổi Bật
                        </a>
                    </h3>
                </div>
                <div class="row">
                    <div class="carousel slide" id="myCarousel">
                        <div class="carousel-inner">
                            {% for i in 1..4 %}
                                <div class="item active col-sm-6 col-md-3">
                                    <div class="thumbnail">
                                        <img data-src="holder.js/100%x200" alt="100%x200" src="" style="height: 200px; width: 100%; display: block;">
                                        <div class="caption">
                                            <h3>Thumbnail label</h3>
                                            <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                                            <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
                                        </div>
                                    </div>
                                </div>
                            {% endfor %}
                            <!--<a data-slide="prev" href="#myCarousel" class="left carousel-control">‹</a>
                            <a data-slide="next" href="#myCarousel" class="right carousel-control">›</a> -->
                        </div>
                    </div>
                </div>
            </div>
        {% endfor %}
    </div>
{% endblock %}

{% block videoComments %}
    <div id="fb-comments" class="video-comments">
        <div class="mask">
            <div class="container">
                <div class="row">
                    <div class="page-header">
                        <h3 class="text-left">Bình luận</h3>
                    </div>
                    <div class="fb-comments" data-href="http://javhd.vn" data-numposts="10" data-colorscheme="light" data-width="100%"></div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}
